<template>
	<view class="order_server_box">
		<view class="page_header_box">
			<!-- #ifdef APP -->
			<view class="account_pending_box">
				<view class="account_pending_num_box">
					<template v-for="(item, index) in otherInfo" :key="index">
						<template v-if="index == 0">
							<view class="account_nick_name">{{ item.nickName }}</view>
							<view class="account_pending_num">
								<text v-if="item.pendingOrderCount">待接单+{{ item.pendingOrderCount }}；</text>
								<text v-if="item.pendingApplyStudioCount">待修改的陪宠师申请+{{ item.pendingApplyStudioCount }}；</text>
								<text v-if="item.waitOrderCount">待服务+{{ item.waitOrderCount }}；</text>
								<text v-if="item.notReadMessageCount">未读消息+{{ item.notReadMessageCount }}</text>
							</view>
						</template>
					</template>
				</view>
				<view class="switch_accounts_box" @click="changeAccountNum">
					<view class="switch_text">切换账号</view>
					<uni-icons type="right" size="16"></uni-icons>
				</view>
			</view>
			<!-- #endif -->
			<view class="order_tab_box">
				<view class="order_type_tab_box">
					<view
						:class="['order_type_tab_head', item.status == activeTab ? 'order_type_tab_head_active' : '']"
						@click="handelChangeOrderType(item)"
						v-for="item in orderTab"
						:key="item.status">
						<view class="type_text">{{ item.name }}</view>
						<view class="active_type"></view>
					</view>
				</view>
			</view>
		</view>
		<receptionHall v-show="[1, 8].includes(Number(activeTab))" ref="receptionHallRef"></receptionHall>
		<serviceHall class="serviceHallIndex" v-show="activeTab == 2" ref="serviceHallRef"></serviceHall>
	</view>
</template>

<script setup lang="ts">
import serviceHall from "../serviceHall/index.vue";
import receptionHall from "../receptionHall/index.vue";
import { reactive, ref } from "vue";
import api from "@/api";
import { useStudioStoreToRefs } from "@/store/useStudioStore";

let { identity, studio, studioBalance } = useStudioStoreToRefs();

let activeTab = ref(8);
let otherInfo = reactive([]);
const receptionHallRef = ref();
const serviceHallRef = ref();

let orderTab = reactive([
	{ name: "待派单", status: 8 },
	{ name: "待接单", status: 1 },
	{ name: "服务大厅", status: 2 }
]);

const getOrderTab = () => {
	let orderTabArr = [];
	if (identity.value === 0) {
		// 过滤掉 status 为 8 的元素，更新 orderTab
		orderTabArr = orderTab.filter((item) => item.status !== 8);
		orderTab = orderTabArr;
		activeTab.value = 1;
	}
	console.log(orderTabArr, "orderTabArr");
	console.log(orderTab, "orderTab");
	console.log(activeTab.value, "activeTab.value");
};

const handelChangeOrderType = async (item) => {
	activeTab.value = item.status;
	console.log(activeTab.value);
	if (activeTab.value == 2) {
		serviceHallRef.value && serviceHallRef.value.onDataInit();
	} else {
		receptionHallRef.value && receptionHallRef.value.onDataInit(item);
	}
	scrollToTop();
};

const scrollToTop = () => {
	uni.pageScrollTo({
		scrollTop: 0,
		duration: 300
	});
};
const changeAccountNum = () => {
	uni.navigateTo({
		url: `/pages/setting/changeAccountNumber/index`
	});
};
const getHallInfo = () => {
	receptionHallRef.value && receptionHallRef.value.getInfo();
};
const getOtherInfo = async () => {
	uni.getSystemInfo({
		success: async (e) => {
			let deviceId = "";
			// #ifdef APP
			deviceId = e.deviceId;
			// #endif
			const res: any = await api({
				method: "get",
				url: `/mall/user/getOtherAccountTodo?deviceId=${deviceId}`
			});
			if (res.data && res.data.length > 0) {
				otherInfo = [res.data[0]];
			} else {
				otherInfo = res.data;
			}
		}
	});
	console.log(otherInfo, "otherInfo");
};

const onDataInit = (options: any) => {
	console.log(options, "options");
	console.log(activeTab.value, "activeTab.value");
	if (options?.hasOwnProperty("type")) {
		activeTab.value = options.type;
	}
	if (activeTab.value == 2) {
		serviceHallRef.value && serviceHallRef.value.onDataInit();
	} else {
		receptionHallRef.value && receptionHallRef.value.onDataInit({ status: activeTab.value });
	}
};
const onRefresh = () => {
	if (activeTab.value == 2) {
		serviceHallRef.value && serviceHallRef.value.onRefresh();
	} else {
		receptionHallRef.value && receptionHallRef.value.onRefresh();
	}
};

const onLoadMore = () => {
	if (activeTab.value == 2) {
		serviceHallRef.value && serviceHallRef.value.onLoadMore();
	} else {
		receptionHallRef.value && receptionHallRef.value.onLoadMore();
	}
};

defineExpose({ getOtherInfo, onLoadMore, getHallInfo, onRefresh, onDataInit, getOrderTab });
</script>

<style scoped lang="scss">
.order_server_box {
	min-height: calc(100vh - 88rpx - 32rpx - var(--status-bar-height));
	padding-bottom: calc(var(--safe-area-bottom) + 100rpx);
	box-sizing: border-box;
	background-color: var(--pages-bg-color);
}

.order_tab_box {
	background: #f9f6f6;
	position: sticky;
	top: 0;
	left: 0;
	z-index: 1;

	.order_type_tab_box {
		//position: sticky;
		//top: 0;
		//z-index: 1;
		display: flex;
		justify-content: space-evenly;
		width: 100%;
		background: #ffffff;
		padding: 0 40rpx;
		box-sizing: border-box;
		border-top: 1rpx solid #e4e6e6;

		.order_type_tab_head {
			position: relative;
			display: flex;
			flex: 1;
			flex-direction: column;
			align-items: center;
			height: 88rpx;
			padding-top: 20rpx;
			box-sizing: border-box;

			.type_text {
				font-weight: 400;
				font-size: 28rpx;
				height: 100%;
				color: #5c5e5e;
				text-align: center;
			}
		}

		.order_type_tab_head_active {
			.type_text {
				font-weight: bold;
				font-size: 32rpx;
				color: #1b2120;
			}

			.active_type {
				bottom: 0;
				width: 32rpx;
				height: 8rpx;
				background: var(--color-primary);
				border-radius: 4rpx;
			}
		}
	}
}

.page_header_box {
	position: sticky;
	top: 0;
	left: 0;
	z-index: 1;
	background: #ffffff;
}

.account_pending_box {
	padding: 20rpx 32rpx;
	box-sizing: border-box;
	background: #ffffff;
	display: flex;
	justify-content: space-between;
	border-bottom: 1rpx solid #e4e6e6;

	.account_pending_num_box {
		align-items: center;
		display: flex;
		max-width: 530rpx;

		.account_nick_name {
			font-weight: bold;
			font-size: 26rpx;
			color: #1b2120;
			flex-shrink: 0;
			width: 120rpx;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			-o-text-overflow: ellipsis;
		}

		.account_pending_num {
			width: 360rpx;
			overflow: hidden;
			word-break: break-all;
			overflow: hidden;
			display: -webkit-box;
			-webkit-line-clamp: 1; /* 根据高度设置行数 */
			-webkit-box-orient: vertical;

			font-weight: 400;
			font-size: 24rpx;
			color: #7c807f;
			margin-left: 8rpx;
			white-space: nowrap;
			text-overflow: ellipsis;
			-o-text-overflow: ellipsis;
		}
	}

	.switch_accounts_box {
		display: flex;
		align-items: center;

		.switch_text {
			font-weight: 400;
			font-size: 26rpx;
			color: #1b2120;
		}
	}
}

.order_status_type_box {
	display: flex;
	//justify-content: space-between;
	padding: 32rpx 40rpx 24rpx;
	box-sizing: border-box;
	//position: sticky;
	//top: 90rpx;
	//z-index: 1;
	background: #f9f6f6;

	.order_status_text {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 110rpx;
		height: 58rpx;
		font-weight: 400;
		font-size: 26rpx;
		color: #7c807f;
		background: #fff;
		border-radius: 29rpx;
		margin-right: 66rpx;
	}

	.active_order_status {
		border-radius: 29rpx;
		border: 2rpx solid #ff6084;
		box-sizing: border-box;
		font-weight: bold;
		font-size: 26rpx;
		color: #f87c90;
	}
}
</style>
<style lang="scss" scoped>
::v-deep .serviceHallIndex {
	.uni-calendar__content {
		border-radius: 24rpx;
	}

	// .uni-calendar__box{
	//  height: 186rpx;
	//  overflow: hidden;
	// }

	.item--uni-calendar-item--checked {
		background: linear-gradient(90deg, #ffa6bc 0%, #ffa3a3 100%);
		border-radius: 50%;
	}

	.uni-calendar-item--checked {
		background: linear-gradient(90deg, #ffa6bc 0%, #ffa3a3 100%);
		border-radius: 50%;
	}

	.uni-calendar-item__weeks-box-circle {
		display: none;
	}

	.uni-calendar-item--isDay {
		background: linear-gradient(90deg, #ffa6bc 0%, #ffa3a3 100%);
		border-radius: 50%;
		color: #ffffff !important;
		font-size: 20rpx;
	}

	.uni-calendar-item--isDay-text {
		color: #1b2120;
	}
}
</style>
